<template>
  <div class="card">
    <div class="img-container">
      <img :src="cardData.imgUrl" alt />
    </div>

    <div class="info">
      <div class="title">{{cardData.title}}</div>
      <p class="count">{{cardData.count}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 设计图片地址
    cardData: {
      type: Object,
      default: () => {
        return {};
      },
      required: true,
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/common.less");
.card {
  width: @height;
  height: @cardHomeHeight;
  background: @fontColorFFF;
  border-radius: 4px;
  box-shadow: 0px 0px 5px #ccc;
  .flex;
  .img-container {
    .flex-1;
    .flex-center;
    img {
      width: @cardHomeWidth;
    }
  }
  .info {
    .flex-2;
    .flex-center;
    .flex-column;
    .title {
      .font-weight-500;
      font-size: @fontSize-16;
      color: @fontColorCCC;
      .line-height-1-8;
    }
    .count {
      color: @fontColor333;
      .font-weight-500;
      font-size: @fontSize-18;
    }
  }
}
</style>